<template>
    <div class="section-container">
        <div class="section-item">
            <div class="section-left">
                <img class="img" src="@/assets/imgs/img5.jpg" />
            </div>
            <div class="section-right">
                <span class="title">Your Edge Cloud. Your Way.</span>
                <span class="desc">Wherever you want it – Colocation, Private Data Center, or</span>
                <span class="desc">Public Cloud. Whether you want to move to the cloud,</span>
                <span class="desc">repatriate from the cloud or just need resources closer to your</span>
                <span class="desc">data at the edge.</span>
            </div>
        </div>
        <div class="section-item">
            <div class="section-left special-left">
                <div class="label-section">
                    <span class="title">Multi-Tenant Environment.</span>
                    <span class="title">Single-Tenant Experience.</span>
                    <span class="desc">With Zadara Edge Cloud, multiple tenants are able to run compute and</span>
                    <span class="desc">storage resources simultaneously on the same physical machines,</span>
                    <span class="desc">without interfering with one another. You can maintain predictable</span>
                    <span class="desc">performance, full data privacy and security, and full elasticity,
                        regardless</span>
                    <span class="desc">of how many users are active at once. Download the Multi-tenancy &</span>
                    <span class="desc">Quality of Service Solution Brief.</span>
                </div>
            </div>
            <div class="section-right">
                <img class="img" src="@/assets/imgs/img6.jpg" />
            </div>
        </div>
        <div class="section-item">
            <div class="section-left">
                <img class="img" src="@/assets/imgs/img7.png" />
            </div>
            <div class="section-right">
                <span class="title">Efficient Operations & Significantly Lower TCO.</span>
                <span class="desc">With NO CapEx investment and NO long-term contracts required, you can</span>
                <span class="desc">now enjoy high-performance elastic cloud services, including edge</span>
                <span class="desc">computing, without financial or operational burdens. Scale up, down or</span>
                <span class="desc">turn off Zadara Edge Cloud Services at any time and only pay for what</span>
                <span class="desc">you use.</span>
            </div>
        </div>
        <div class="section-item">
            <div class="section-left special-left">
                <div class="label-section">
                    <span class="title">Your Success is How We Measure Our Success.</span>
                    <span class="desc">Backed by an industry-best NPS rating of 71, Zadara Edge Cloud users are</span>
                    <span class="desc">supported by Zadara’s team of battle-tested cloud experts and backed by</span>
                    <span class="desc">our 100% SLA guarantee. With Zadara, you can rest assured that you are</span>
                    <span class="desc">partnering with a cloud services provider that will stop at nothing to</span>
                    <span class="desc">deliver best-in-class cloud services for your business.</span>
                </div>
            </div>
            <div class="section-right">
                <img class="img img-special" src="@/assets/imgs/img8.png" />
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.section-container {
    .section-item {
        display: flex;
        padding: 40px 0;

        .section-left {
            width: 50%;
            text-align: right;

            .img {
                width: 450px;
                height: 395px;
                margin-right: 40px;
            }

            .img-special {
                width: 288px;
                height: 303px;
            }

            .title {
                font-size: 30px;
                font-weight: 500;
                font-family: 'MouldyCheeseRegular';

                &:first-child {
                    margin-top: 100px;
                }
            }

            .desc {
                color: #282828;
                font-size: 17px;
            }

            .label-section {
                text-align: left;
                display: flex;
                flex-direction: column;
                margin-right: 40px;
            }
        }

        .special-left {
            display: flex;
            justify-content: flex-end;
        }

        .section-right {
            width: 50%;
            display: flex;
            flex-direction: column;


            .img {
                width: 450px;
                height: 395px;
                margin-left: 40px;
            }

            .img-special {
                width: 288px;
                height: 303px;
            }

            .title {
                font-size: 30px;
                font-weight: 500;
                font-family: 'MouldyCheeseRegular';

                &:first-child {
                    margin-top: 100px;
                }
            }

            .desc {
                color: #282828;
                font-size: 17px;
            }
        }
    }
}
</style>